<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="{{url_for('static', filename='layui/css/layui.css')}}" rel="stylesheet">
</head>

<style type="text/css">
    .site-border-default fieldset {
        border-top: 1px solid #eee;
    }

    .site-border-red fieldset {
        border-top: 1px solid #FF5722;
    }

    .site-border-orange fieldset {
        border-top: 1px solid #FFB800;
    }

    .site-border-green fieldset {
        border-top: 1px solid #009688;
    }

    .site-border-cyan fieldset {
        border-top: 1px solid #2F4056;
    }

    .site-border-blue fieldset {
        border-top: 1px solid #1E9FFF;
    }

    .site-border-black fieldset {
        border-top: 1px solid #393D49;
    }

    .label-div {
        display: inline-block;
        margin-top: 9px;
    }
</style>

<body>
    <div style="margin-left: 20%; margin-right: 20%; margin-top: 4%;">
        <div class="site-border-green">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend class="layui-font-green">请选择任务</legend>
            </fieldset>
        </div>
        <div class="layui-form" style="text-align: center;">
            <input type="radio" name="task" value="脑电帽迁移" title="脑电帽迁移" checked>
            <input type="radio" name="task" value="模态迁移" title="模态迁移">
            <input type="radio" name="task" value="范式迁移" title="范式迁移">
        </div>

        <div class="site-border-green">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend class="layui-font-green">请选择模型</legend>
            </fieldset>
        </div>

        <div class="layui-form">
            <div style="margin-left: 17%;">
                <div class="layui-row">
                    <div class="layui-col-md2">
                        <div class="grid-demo label-div"> 传统机器学习模型 </div>
                    </div>
                    <div class="layui-col-md2">
                        <input class="grid-demo" type="radio" name="model" value="LDA" title="LDA">
                    </div>
                    <div class="layui-col-md2">
                        <input class="grid-demo" type="radio" name="model" value="LR" title="LR">
                    </div>
                    <div class="layui-col-md2">
                        <input class="grid-demo" type="radio" name="model" value="AdaBoost" title="AdaBoost">
                    </div>
                    <div class="layui-col-md2">
                        <input class="grid-demo" type="radio" name="model" value="XGB" title="XGB">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md2">
                        <div class="grid-demo label-div"> 深度学习模型 </div>
                    </div>
                    <div class="layui-col-md2">
                        <input class="grid-demo" type="radio" name="model" value="EEGNet" title="EEGNet">
                    </div>
                    <div class="layui-col-md2">
                        <input class="grid-demo" type="radio" name="model" value="SimCLR" title="SimCLR">
                    </div>
                    <div class="layui-col-md2">
                        <input class="grid-demo" type="radio" name="model" value="TFC" title="TFC">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md2">
                        <div class="grid-demo label-div"> 本文提出的模型 </div>
                    </div>
                    <div class="layui-col-md2">
                        <input class="grid-demo" type="radio" name="model" value="XXX" title="XXX" checked>
                    </div>
                </div>
            </div>
        </div>

        <div class="site-border-green">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend class="layui-font-green">请上传数据集</legend>
            </fieldset>
        </div>

        <div class="layui-row" style="text-align: center;">
            <div class="layui-col-sm2">&nbsp;</div>
            <div class="layui-col-sm3">
                <button id="uploadSource" class="layui-btn test"
                    lay-data="{url:'/b/', accept:'file', exts:'zip', auto:false, drag:true, acceptMime:'application/zip'}"
                    style="margin-right:8%;">
                    选择源域数据集(.zip)
                </button>
            </div>
            <div class="layui-col-sm2">&nbsp;</div>
            <div class="layui-col-sm3">
                <button id="uploadTarget" class="layui-btn test"
                    lay-data="{url:'/b/', accept:'file', exts:'zip', auto:false, drag:true, acceptMime:'application/zip'}">
                    选择目标域数据集(.zip)
                </button>
            </div>
            <div class="layui-col-sm2">&nbsp;</div>
        </div>

        <div class="site-border-green">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend class="layui-font-green">参数调节</legend>
            </fieldset>
        </div>

        <div class="layui-form layui-row">
            <div class="grid-demo layui-col-md1" style="margin-left: 6%; padding-right:1%; text-align: right;">
                <div class="label-div"> epoch </div>
            </div>
            <div class="grid-demo layui-col-md2" style="margin-right: 5%;">
                <select lay-search="" id="epoch">
                    <option value="50"> 50</option>
                    <option value="100">100</option>
                    <option value="150">150</option>
                    <option value="200">200</option>
                    <option value="300">300</option>
                </select>
            </div>

            <div class="grid-demo layui-col-md1" style="padding-right:1%; text-align: right;">
                <div class="label-div"> batchsize </div>
            </div>
            <div class="grid-demo layui-col-md2" style="margin-right: 5%;">
                <select lay-search="" id="batchsize">
                    <option value="8"> 8</option>
                    <option value="16">16</option>
                    <option value="32">32</option>
                    <option value="64">64</option>
                </select>
            </div>

            <div class="grid-demo layui-col-md1" style="padding-right:1%; text-align: right;">
                <div class="grid-demo label-div"> 优化器 </div>
            </div>
            <div class="grid-demo layui-col-md2">
                <select lay-search="" id="optimizer">
                    <option value="SGD">SGD</option>
                    <option value="Adam">Adam</option>
                </select>
            </div>
        </div>

        <div class="layui-form" style="text-align: center; margin-top: 1%;">
            <input type="checkbox" name="EASwitch" title="启用EA|关闭EA" lay-skin="switch" lay-filter="EAswitch-filter">
            <button type="button" id="EADisplayButton" class="layui-btn layui-btn-primary layui-btn-disabled"
                lay-on="test-tips-right" style="margin-left: 15%;" disabled>
                查看对齐效果
            </button>
        </div>
        <!-- <div style="display: inline-block; margin-top: 20px;">查看对齐效果</div> -->
        <br>
        <div style="width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 3%;">
            <button type="button" class="layui-btn layui-btn-fluid" lay-active="run">运行</button>
        </div>
    </div>
</body>

<script src="{{url_for('static', filename='layui/layui.js')}}"></script>
<script>
    layui.use(function () {

        var $ = layui.$;
        var upload = layui.upload;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;

        $('#panelLi', window.parent.document).addClass('layui-this').siblings().removeClass('layui-this');

        var EAid = 0;

        upload.render({
            elem: '#uploadSource',
            // url: '',
            done: function (res) {
                // layer.msg('上传成功');
                $('#uploadSource').removeClass('layui-hide').find('zip').attr('src', res.files.file);
                // console.log(res);
            }
        });

        upload.render({
            elem: '#uploadTarget',
            done: function (res) {
                $('#uploadTarget').removeClass('layui-hide').find('zip').attr('src', res.files.file);
            }
        });

        util.on('lay-on', {
            'test-tips-right': function () {
                if (EAid) {
                    layer.close(EAid);
                    EAid = 0;
                } else {
                    EAid = layer.tips('假装这是对齐结果', this);
                }
            }
        });

        form.on('switch(EAswitch-filter)', function (data) {
            if (data.elem.checked) {
                $('#EADisplayButton').removeClass('layui-btn-disabled').attr("disabled", false);
            } else {
                $('#EADisplayButton').addClass('layui-btn-disabled').attr("disabled", true);
                layer.close(EAid);
                EAid = 0;
            }
        });

        util.event('lay-active', {
            run: function () {
                files = $('.layui-inline.layui-upload-choose');
                if (files.length < 2) {
                    layer.open ({
                        title: '提示',
                        content: '请选择数据集'
                    });
                    return;
                };
                $.ajax({
                    url: '/run',
                    data: {
                        task: $("input[name='task']:checked").val(),
                        model: $("input[name='model']:checked").val(),
                        epoch: $('#epoch').val(),
                        source: files.eq(0).text(),
                        target: files.eq(1).text(),
                        batchsize: $('#batchsize').val(),
                        optimizer: $('#optimizer').val(),
                        ea: $("input[name='EASwitch']").val()
                    },
                    dataType: 'text',
                    type: 'post',
                    success: function (data) {
                        if (data) {
                            $("#body", window.parent.document).attr("src", "{{url_for('result')}}");
                            // $("div[class='layui-body']").innerHTML = "<iframe id='body' width='100%' height='100%' src=''></iframe>";
                            console.log('data');
                            
                        } else {
                            layer.open ({
                                title: '提示',
                                content: '未识别的数据集，请确认'
                            });
                        }
                    },
                });
            }
        });
    });
</script>

</body>

</html>